<template>
  <div id="china_map_box">
      <div id="china_map"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts-gl";
import 'echarts/map/js/china.js' 
// import chinajson from  'echarts/map/json/china.json'

let geoCoordMap = {	//定义自定义图标放置的位置

			'新疆': [86.61 , 40.79],
      '西藏':[89.13 , 30.66],
      '黑龙江':[128.34 , 47.05],
      '吉林':[126.32 , 43.38],
      '辽宁':[123.42 , 41.29],
      '内蒙古':[112.17 , 42.81],
      '北京':[116.60 , 40.40 ],
      '宁夏':[106.27 , 36.76],
      '山西':[111.95,37.65],
      '河北':[115.21 , 38.44],
      '天津':[117.64 , 39.52],
      '青海':[97.07 , 35.62],
      '甘肃':[103.82 , 36.05],
      '山东':[118.01 , 36.37],
      '陕西':[108.94 , 34.46],
      '河南':[113.46 , 34.25],
      '安徽':[117.28 , 31.86],
      '江苏':[120.26 , 32.54],
      '上海':[121.46 , 31.28],
      '四川':[103.36 , 30.65],
      '湖北':[112.29 , 30.98],
      '浙江':[120.15 , 29.28],
      '重庆':[107.51 , 29.63],
      '湖南':[112.08 , 27.79],
      '江西':[115.89 , 27.97],
      '贵州':[106.91 , 26.67],
      '福建':[118.31 , 26.07],
      '云南':[101.71 , 24.84],
      '台湾':[121.01 , 23.54],
      '广西':[108.67 , 23.68],
      '广东':[113.98 , 22.82],
      '海南':[110.03 , 19.33],
      '澳门':[113.54 , 22.19],
      '香港':[114.17 , 22.32],
		};

let markList = []
let options = {
  tooltip: {
    triggerOn: "click",   //mousemove、click
    padding:8,
    borderWidth:1,
    borderColor:'#409eff',
    backgroundColor:'rgba(255,255,255,0.7)',
    textStyle:{
      color:'#000000',
      fontSize:13
    },
    // formatter: function(e) {
    //   let data = e.data;
    //   let context = data.name + '<button class="more" style="color: red;" type="button" onclick="' +
    //               // this.goToDetail(data.name) +
    //               '">查 看></button>' + '<br>' +
    //               '总数' + '&nbsp' + data.value
    //   return context;
    // }
  },
  visualMap: {
    show:true,
    left: 10,
    bottom: 10,
    showLabel:true,
    pieces: [
      {
        lt:1,
        label:'<1',
        color: "#f9fafd"
      },
      {
        gte: 1,
        lt:9,
        label:'1-9',
        color: "#bcc5ee"
      },
      {
        gte: 10,
        lt: 99,
        label: "10 - 99",
        color: "#9face7"
      },
      {
        gte: 100,
        lt:499,
        label: "100 - 499",
        color: "#6f83db"
      },
      {
        gte: 500,
        lt: 999,
        label: "500 - 999",
        color: "#3c57ce"
      },
      {
        gte: 1000,
        label: ">= 1000",
        color: "#1f307b"
      }
       
    ]
  },
  // geo3D: {
  //   type:"map3D",
  //   map: "china",
  //   scaleLimit: {
  //     min: 1,
  //     max: 2
  //   },
  //   zoom: 1.2,
  //   top: 120,
  //   label: {
  //     normal: {
  //       show:true,
  //       fontSize: "12",
  //       color: "rgba(0,0,0,0.7)"
  //     }
  //   },
  //   itemStyle: {
  //     normal: {
  //       shadowBlur: 50,
  //       shadowColor: 'rgba(0, 0, 0, 0.2)',
  //       borderColor: "rgba(0, 0, 0, 0.2)"
  //     },
  //     emphasis: {
  //       areaColor: "#f2d5ad",
  //       shadowOffsetX: 0,
  //       shadowOffsetY: 0,
  //       borderWidth: 0
  //     }
  //   }
  // },
  series: [
    {
      name: "突发事件",
      type: "map3D",
      map: "china",
      boxDepth:90,//地图倾斜度
      // boxHeight:10, 
      // regionHeight:8,
      geoIndex: 0,
      shading :'realistic',
      roam: true,
      itemStyle: {         
      //     opacity: 1,
          borderWidth: 0.2,
          borderColor: '#0d0015', // 地图边配色
      // normal: {
      //   shadowBlur: 50,
      //   shadowColor: 'rgba(0, 0, 0, 0.2)',
      //   // borderColor: "rgba(0, 0, 0, 0.2)"
      // },
      // emphasis: {
      //   areaColor: "#f2d5ad",
      //   shadowOffsetX: 0,
      //   shadowOffsetY: 0,
      //   borderWidth: 0
      // }
      },

      groundPlane: {
        show: false
      },
      realisticMaterial: {
        detailTexture: '#fff', // 纹理贴图
        textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
        roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
        metalness: 0, // 0材质是非金属 ，1金属
        roughnessAdjust: 1
      },      

      data:[],
      viewControl:{
          distance:100,//地图视角 控制初始大小
          // rotateSensitivity:0,//禁止旋转
          zoomSensitivity:0,//禁止缩放
      },
    }
    
  ]
};

let dataList  = [
        // {
        //   name: "南海诸岛",
        //   value: 100,
        //   eventTotal:100,
        //   specialImportant:10,
        //   import:10,
        //   compare:10,
        //   common:40,
        //   specail:20
        // },
        {
          name: "北京",
          value: 540
        },
        {
          name: "天津",
          value: 130
        },
        {
          name: "上海",
          value: 400
        },
        {
          name: "重庆",
          value: 750
        },
        {
          name: "河北",
          value: 130
        },
        {
          name: "河南",
          value: 830
        },
        {
          name: "云南",
          value: 110
        },
        {
          name: "辽宁",
          value: 19
        },
        {
          name: "黑龙江",
          value: 150
        },
        {
          name: "湖南",
          value: 690
        },
        {
          name: "安徽",
          value: 60
        },
        {
          name: "山东",
          value: 39
        },
        {
          name: "新疆",
          value: 4
        },
        {
          name: "江苏",
          value: 31
        },
        {
          name: "浙江",
          value: 104
        },
        {
          name: "江西",
          value: 36
        },
        {
          name: "湖北",
          value: 52
        },
        {
          name: "广西",
          value: 33
        },
        {
          name: "甘肃",
          value: 7
        },
        {
          name: "山西",
          value: 5
        },
        {
          name: "内蒙古",
          value: 1200
        },
        {
          name: "陕西",
          value: 22
        },
        {
          name: "吉林",
          value: 4
        },
        {
          name: "福建",
          value: 18
        },
        {
          name: "贵州",
          value: 0
        },
        {
          name: "广东",
          value: 98
        },
        {
          name: "青海",
          value: 0
        },
        {
          name: "西藏",
          value: 0
        },
        {
          name: "四川",
          value: 44
        },
        {
          name: "宁夏",
          value: 4
        },
        {
          name: "海南",
          value: 22
        },
        {
          name: "台湾",
          value: 3
        },
        {
          name: "香港",
          value: 5
        },
        {
          name: "澳门",
          value: 555
        }
      ]
let timer = null;  // 单击地图定时器
export default {
  data() {
    return {
      //echart 配制option  
      options: {...options},
      //echart data
      dataList: dataList,
      markList: markList,
    };
  },
  created() {
    let _this = this;
    // 地图标签点击事件
    this.options.tooltip.formatter = function(e) {
      if(e.componentSubType === "scatter"){ return }
      let data = e.data;
      let context = data.name + '<button id="more"  class="more" style="color: red;" type="button" onclick="' +
                  _this.goToDetail(data.name) +
                  '">查 看></button>' + '<br>' 
                  // '总数' + '&nbsp' + data.value
      return context;
    }
    let geoMarkList = this.dataList.map((data)=>{
      if(data.value === 0)
        return{value:geoCoordMap[data.name]};
    })
    // this.dataList = this.dataList.map((data)=>{
      
    //     return{height:data.value/200,...data};
    // })
    this.markList =  geoMarkList;
    this.setEchartOption();
  },
  mounted() {
    
    this.$nextTick(()=>{
        
        // this.options.
        this.myChart = this.initEchartMap();
        
        // 绑定双击事件，返回全国地图
        this.myChart.off('dblclick');
        this.myChart.on('dblclick', this.echartsMapDblClick);
        // 绑定单击事件
        this.myChart.off('click');
        this.myChart.on('click', this.echartsMapClick);
    })
  },
  beforeDestroy() {
     if (!this.myChart) {
           return;
     }
     this.myChart.off('dblclick');
     this.myChart.off('click');
     this.myChart.dispose();
     this.myChart = null;
 },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('china_map');
      let myChart = echarts.init(mapDiv);
      // echarts.registerMap('china',chinajson)
      myChart.setOption(this.options);
      return myChart;
    },
    //修改echart配制
    setEchartOption(){
       this.options.series[0]['data'] = this.dataList;
      //  this.options.series[1]['data'] = this.markList;
    },
    // 跳转链接
    goToDetail(provinceName) {
        // this.provinceName = provinceName;
        
        document.getElementById('china_map').addEventListener('click', (ev) => {
            let el = ev.target;
            
            if (el.tagName.toLowerCase() === 'button' && el.className === 'more') {
                console.log('buttonClick: ',provinceName)
                
            }
        })

    },
    // echarts 双击事件
    echartsMapDblClick(params) {
      clearTimeout(timer);
      let provinceName = params.name; //地区name
      // this.provinceName = provinceName;
      // 双击事件处理的代码
      if (provinceName) {
        // 跳转链接
        console.log('echartsMapDblClick: ',provinceName)
        // this.goToDetail(provinceName);
      }

    },
    // echarts 单击事件
    echartsMapClick(params) {
        clearTimeout(timer);
        timer = setTimeout(function () {
            // console.log("单击");
            if (params) {
                let provinceName = params.name; //地区name
                // console.log(provinceName);
                
                // 否则从数组中删除对应的省份数据
                if (params.name) {
                  // 选中省份逻辑代码
                  console.log(provinceName);
                }
                else {
                    // 取消选中逻辑代码
                    console.log(provinceName);
                }                
            }
        }, 300);
    }



  }
};
</script>

<style scoped>
    #china_map_box {
        height: 100%;
        position: relative;
    }
    #china_map_box #china_map{
        height: 100%;
    }
     #china_map_box .china_map_logo{
        position: absolute;
        top: 0;
        left: 0;
        width:45px;
     }
</style>
<style>
  #china_map .tooltip_style{
      line-height:1.7;
      overflow: hidden;
  }
  #china_map .tooltip_left{
      float: left;
  }
  #china_map .tooltip_right{
      float: right;
  }

</style>
